import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Typography, Link } from '@mui/material';
import Masonry from '@mui/lab/Masonry';
import VisitorCounter from 'components/electrons/VisitorCounter';

const Footer = ({
  display = true,
  paddingY = 0,
  paddingX = 0,
  backgroundColor = 'transparent',
  innerBackgroundColor = 'transparent',
  color = 'primary.main',
  fontWeight = 400
}) => {
  const navigate = useNavigate();

  const navigatePage = (url) =>
    window.open(url, '_blank', 'noopener,noreferrer');

  const navigateOpen = (path) => {
    if (path?.startsWith('http')) {
      navigatePage(path);
    } else if (path) {
      navigate(path);
    }
  };

  const linkStyle = {
    fontSize: '0.8rem',
    fontWeight,
    color,
    textDecoration: 'none',
    cursor: 'pointer',
    py: 0.5,
    '&:hover': {
      textDecoration: 'underline',
      color: 'secondary.main'
    }
  };

  const section = (title, items) => (
    <Box sx={{ breakInside: 'avoid', mb: 1 }}>
      <Typography
        variant="caption"
        sx={{ color, fontWeight, display: 'block', mb: 0.5 }}
      >
        {title}
      </Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
        {items.map(({ label, path }, idx) => (
          <Link
            key={idx}
            component="button"
            onClick={() => navigateOpen(path)}
            sx={linkStyle}
          >
            {label}
          </Link>
        ))}
      </Box>
    </Box>
  );

  if (!display) return null;

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        py: paddingY,
        backgroundColor,
        width: '100%'
      }}
    >
      <Box
        sx={{
          width: {
            xs: '100%',
            sm: 600,
            md: 960,
            lg: 1280,
            xl: 1920
          },
          px: paddingX,
          backgroundColor: innerBackgroundColor
        }}
      >
        <Masonry columns={{ xs: 2, sm: 3, md: 4, lg: 6 }} spacing={2}>
          {section('Public Pages', [
            { label: 'Home', path: '/' },
            { label: 'Home Page', path: '/home-page' },
            { label: 'Hello World', path: '/hello-world' }
          ])}
          {section('Authentication', [
            { label: 'Login', path: '/auth/login' },
            { label: 'Register', path: '/auth/register' },
            { label: 'Forgot Password', path: '/auth/forgot-password' },
            { label: 'Resend Activation', path: '/auth/resend-activation' },
            { label: 'Reset Password' },
            { label: 'Activate Account' }
          ])}
          {section('User Management', [
            { label: 'All Users', path: '/users' },
            { label: 'Create User', path: '/create-user' },
            { label: 'Edit User', path: '/user/edit' },
            { label: 'Edit Account', path: '/account/edit' },
            { label: 'Edit User ID' },
            { label: 'User Detail' }
          ])}
          {section('Team Management', [
            { label: 'All Teams', path: '/teams' },
            { label: 'My Teams', path: '/user-teams' },
            { label: 'Team Detail' }
          ])}
          {section('Dashboard', [
            { label: 'Dashboard Home', path: '/dashboard' }
          ])}
          {section('Billing & Plans', [
            { label: 'Add Payment Card', path: '/card/add' },
            { label: 'Select Plan', path: '/plan' },
            { label: 'Subscribe Plan' }
          ])}
          {section('GitHub Repositories', [
            {
              label: 'Go API Backend',
              path: 'https://github.com/startersaas/startersaas-backend-go-api-main.git'
            },
            {
              label: 'Node API Backend',
              path: 'https://github.com/startersaas/startersaas-backend-node-api-main.git'
            },
            {
              label: 'React Frontend',
              path: 'https://github.com/startersaas/startersaas-frontend-react-spa.git'
            }
          ])}
        </Masonry>

        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
          <VisitorCounter display={true} height={125} />
        </Box>
      </Box>
    </Box>
  );
};

export default Footer;